<html>
<head>
	<title>Open 20 questions</title>

	<link href="css/site.css" rel="stylesheet" type="text/css" />
	<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />


	<link rel="stylesheet/less" type="text/css" href="css/less/style.less" />
	<script src="lib/plugins/less-1.6.0.min.js" type="text/javascript"></script>


	<script src="jquery/jquery-1.10.2.min.js" type="text/javascript"></script>
	<script src="jquery/jquery-ui-1.10.3.js" type="text/javascript"></script>

	<script src="jquery/jquery.tmpl.min.js" type="text/javascript"></script>
	<script src="jquery/jquery.tmplPlus.min.js" type="text/javascript"></script>
	<script src="lib/plugins/JSON.js" type="text/javascript"></script>
	<script src="lib/plugins/PreventSubmit.js"></script>
	<script src="lib/plugins/PHPWebPage.js"></script>

</head>

<body>
<div class="wrapper mockgame">
	<div id="loading-indicator">
		<img src="images/ajax-loader.gif" alt='Loading...'/>
	</div>

	<h1>20 questions game</h1>

	<p><a href="objects.php">Objects</a> | <a href="questions.php">Questions</a></p>

	<h2>Answer these questions as truthfully as possible:</h2>

	<p class="current_question_number">Question no. 1</p>

	<p class="current_question_content">Is your character a female ?</p>

	<div id="wrapper-possible-answers">
		<a href="javascript:void(0);" id="btnAnswerYes">Yes</a>
		<a href="javascript:void(0);" id="btnAnswerNo">No</a>
		<a href="javascript:void(0);" id="btnAnswerDontKnow">Don't know</a>
		<a href="javascript:void(0);" id="btnAnswerProbablyYes">Probably yes</a>
		<a href="javascript:void(0);" id="btnAnswerProbablyNo">Probably no</a>
	</div>

	<div id="gridQuestionList">

			<div class="records">
				<div class="header">
					<div class="column1">#</div>
					<div class="column2">Question</div>
					<div class="column3">Answer</div>
					<div class="column4">Expected</div>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>

				<div class="record">
					<div class="column1">1</div>
					<div class="column2">Is your character real?</div>
					<div class="column3">Yes</div>
					<div class="column4">Yes</div>
					<div class="clear"></div>
				</div>

				<div class="record par">
					<div class="column1">3</div>
					<div class="column2">Does your character get drunk very often?</div>
					<div class="column3">No</div>
					<div class="column4">No</div>
					<div class="clear"></div>
				</div>

				<div class="record">
					<div class="column1">5</div>
					<div class="column2">Does your character have royal ancestors?</div>
					<div class="column3">Don't know</div>
					<div class="column4">Don't know</div>
					<div class="clear"></div>
				</div>

				<div class="record par">
					<div class="column1">7</div>
					<div class="column2">Is your character dark-skinned?</div>
					<div class="column3">Probably yes</div>
					<div class="column4">Probably yes</div>
					<div class="clear"></div>
				</div>

				<div class="record">
					<div class="column1">9</div>
					<div class="column2">Has your character ever been married?</div>
					<div class="column3">Probably no</div>
					<div class="column4">Probably no</div>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>

			</div>


		<!--<div class="right_side">

			<div class="records">
				<div class="header">
					<div class="column1">#</div>
					<div class="column2">Question</div>
					<div class="column3">Answer</div>
					<div class="column4">Expected</div>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>

				<div class="record">
					<div class="column1">2</div>
					<div class="column2">Is your character real?</div>
					<div class="column3">Yes</div>
					<div class="column4">Yes</div>
					<div class="clear"></div>
				</div>

				<div class="record par">
					<div class="column1">4</div>
					<div class="column2">Does your character get drunk very often?</div>
					<div class="column3">No</div>
					<div class="column4">No</div>
					<div class="clear"></div>
				</div>

				<div class="record">
					<div class="column1">6</div>
					<div class="column2">Does your character have royal ancestors?</div>
					<div class="column3">Don't know</div>
					<div class="column4">Don't know</div>
					<div class="clear"></div>
				</div>

				<div class="record par">
					<div class="column1">8</div>
					<div class="column2">Is your character dark-skinned?</div>
					<div class="column3">Probably yes</div>
					<div class="column4">Probably yes</div>
					<div class="clear"></div>
				</div>

				<div class="record">
					<div class="column1">10</div>
					<div class="column2">Has your character ever been married?</div>
					<div class="column3">Probably no</div>
					<div class="column4">Probably no</div>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>

			</div>
		</div>
		<div class="clear"></div>-->

	</div>
	<div class="clear"></div>

	<input type="hidden" value="<?php echo $gameId; ?>" id="idGame" />

	<footer>

	</footer>

	<div class="clear"></div>
</div>
</body>
</html>